<template>
    <div>
        <el-row>
            <el-col :span="12" style="padding:12px 8px;">
                <template v-for="(name,i) in naviPath">
                    <span v-if="i != naviPath.length-1">
                        <a href="#" @click="goBack(naviPath.length-i-1)" class="navi-path-link">{{ name }}</a>
                    </span>
                    <strong v-else>{{ name }}</strong>
                    <span> / </span>
                </template>
            </el-col>
        </el-row>
        <div>
            <el-row v-for="file in sortedFiles" class="row-content" type="flex">
                <el-col :span="22">
                    <template v-if="file.type === 'file'">
                        <span class="octicon octicon-file-text"></span>
                        <a href="#"> {{ file.name }}</a>
                    </template>
                    <template v-else-if="file.type === 'dir'">
                        <span class="octicon octicon-file-directory"></span>
                        <a href="#" @click="changePath(file.path)"> {{ file.name }}</a>
                    </template>
                </el-col>
                <el-col :span="2" style="text-align: right">
                    <a :href="file.download_url" download="file" v-if="file.type === 'file'">
                        <span class="octicon octicon-cloud-download"></span>
                    </a>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="提示" v-model="dialogVisible" size="tiny">
            <span>无法获取仓库信息，请确认给定完整仓库名是否正确！</span>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<style>
    .row-content {
        padding: 8px;
        border-top: solid lightgray 1px;
    }

    .row-content:last-child {
        border-bottom: solid lightgray 1px;
    }

    .navi-path-link {
        text-decoration: none;
        color: #4078c0;
        font-size: 16px;
    }
</style>

<script>
    import axios from 'axios';

    export default {
        name: 'FileExplorer',
        data: function () {
            return {
                path: '/',
                repo: '',
                files: [],
                dialogVisible: false
            }
        },
        props: {
            fullRepoName: {
                type: String,
                required: true
            }
        },
        computed: {
            sortedFiles: function () {
                return this.files.slice(0).sort(function (a, b) {
                    if (a.type !== b.type) {
                        return a.type === 'dir' ? -1 : 1;
                    } else {
                        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
                    }
                })
            },
            naviPath: function () {
                if (this.fullRepoName === '') return [];

                this.repo = this.fullRepoName.split('\/').pop();
                if (this.path === '/') return [this.repo];

                let pathArray = this.path.split('/');
                pathArray.unshift(this.repo);
                return pathArray;
            }
        },
        methods: {
            getFiles: function () {
                let loading = this.$loading({
                    text: '拼命加载中...'
                });
                let vm = this;
                axios.get('https://api.github.com/repos/' + this.fullRepoName + '/contents' + this.path)
                    .then(function (response) {
                        vm.files = response.data;
                        loading.close();
                    })
                    .catch(function (error) {
                        vm.dialogVisible = true;
                        vm.fullRepoName = '';
                        vm.files = [];
                        loading.close();
                    });
            },
            changePath: function (path) {
                this.path = path;
                this.getFiles();
            },
            goBack: function (index) {
                this.path = this.path.split('/').slice(0, -index).join('/');
                if (this.path === '') this.path = '/';
                this.getFiles();
            }
        },
        watch: {
            fullRepoName: function (nv, ov) {
                this.path = '/';
                this.getFiles();
            }
        },
        created: function () {
            if (this.fullRepoName) this.getFiles();
        }
    };
</script>